<template>
  <div class="bovineVision-mobile">
    <div class="bovineVision-mobile-banner">
      <div class="bovineVision-mobile-banner-info">
        <div class="bovineVision-mobile-banner-info-desc">
          <h2>牛视3.0</h2>
          <p><span>为优秀操盘手倾力打造</span></p>
        </div>
        <div class="bovineVision-mobile-banner-info-btn">
          <vs-button @click="openInfoDialog">咨询了解</vs-button>
        </div>
      </div>
      <div class="bovineVision-mobile-banner-img"
        ><img src="https://static.pdwl.net/jituan/images/mobile/bovineVision/banner.png" alt=""
      /></div>
    </div>
    <div class="bovineVision-mobile-product">
      <div class="bovineVision-mobile-title">
        <h3>产品核心优势</h3>
        <p>当短视频营销成为趋势，当产品源于市场<br />需求，一切都将蓄势待发</p>
      </div>
      <div class="bovineVision-mobile-product-body">
        <div
          v-for="(item, idx) in productArr"
          :key="idx"
          class="bovineVision-mobile-product-body-item"
        >
          <div class="bovineVision-mobile-product-body-item-panel">
            <img :src="item.icon" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bovineVision-mobile-customer">
      <div class="bovineVision-mobile-title">
        <h3>专注短视频营销获客</h3>
        <p>全链路流程化，彻底解放<br />短视频操盘手</p>
      </div>
      <div class="bovineVision-mobile-customer-body-box">
        <div class="bovineVision-mobile-customer-body">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide flex_cen bovineVision-mobile-customer-body-item"
                v-for="(item, idx) in customerArr"
                :key="idx"
              >
                <div class="bovineVision-mobile-customer-body-item-img">
                  <img :src="item.img" alt="" />
                  <h5
                    ><span>{{ item.title }}</span></h5
                  >
                  <ul>
                    <li
                      v-for="(subItem, subIdx) in item.subChild"
                      :key="idx + 'a' + subIdx"
                      ><h6>{{ subItem.title }}</h6
                      ><p
                        ><span>{{ subItem.desc }}</span></p
                      ></li
                    >
                  </ul>
                  <div class="bovineVision-mobile-customer-body-item-img-pain">
                    <i class="iconfont icon-sanjiaoright"></i>
                    <h6>解决痛点</h6>
                    <p
                      v-for="(subItem, subIdx) in item.pain"
                      :key="idx + 'b' + subIdx"
                      >{{ subItem }}</p
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bovineVision-mobile-industry">
      <div class="bovineVision-mobile-title dark">
        <h3>你的企业，值得拥有</h3>
        <p
          >助力传统企业数智化转型升级<br />
          打破常规，抓住机会</p
        >
      </div>
      <div class="bovineVision-mobile-industry-body">
        <div
          v-for="(item, idx) in industryArr"
          :key="idx"
          class="bovineVision-mobile-industry-body-item"
        >
          <div class="bovineVision-mobile-industry-body-item-panel">
            <img :src="item.img" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import Footer from '@/components/footer/index.vue';
export default {
  components: { Footer },
  data() {
    return {
      productArr: [
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon1.png',
          title: '账号矩阵管理',
        },
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon2.png',
          title: '热门文案创作',
        },
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon3.png',
          title: '视频智能分析',
        },
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon4.png',
          title: '多平台发布',
        },
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon7.png',
          title: '关键词优化',
        },
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon6.png',
          title: '视频定时智能发布',
        },
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon8.png',
          title: '意向客户实时推送',
        },
        {
          icon: 'https://static.pdwl.net/jituan/images/index/icon5.png',
          title: '克隆数字人播报',
        },
      ],
      industryArr: [
        {
          img: 'https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_1.png',
          title: '传统制造行业',
        },
        {
          img: 'https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_2.png',
          title: '培训企业会销',
        },
        {
          img: 'https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_3.png',
          title: '机械设备五金企业',
        },
        {
          img: 'https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_4.png',
          title: '建材家装水暖电工',
        },
        {
          img: 'https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_5.png',
          title: '衣服鞋包美业',
        },
        {
          img: 'https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_6.png',
          title: '食品生鲜日用百货',
        },
        {
          img: 'https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_7.png',
          title: '通讯安防文体教育',
        },
      ],
      customerArr: [
        {
          title: '多平台多账号矩阵管理',
          img: 'https://static.pdwl.net/jituan/images/solution/icon15.png',
          subChild: [
            {
              title: '多平台绑定发布',
              desc: '支持绑定多平台账号，矩阵式账号管理发布',
            },
            {
              title: 'SEO关键词布局',
              desc: '支持自定义核心词、范围词、长尾词，提升视频搜索排名',
            },
            {
              title: '经营工具挂载',
              desc: '支持位置、小程序和商品营销，满足多重客户需求',
            },
          ],
          pain: [
            '多账户登录与管理较繁琐',
            '意向客户管理难',
            '搜索排名难优化',
            '多元化营销需求',
          ],
        },
        {
          title: '多模式AI创作，规模化生产提效',
          img: 'https://static.pdwl.net/jituan/images/solution/icon21.png',
          subChild: [
            {
              title: 'AI智能单剪',
              desc: 'AI智能文案撰写+智能成片',
            },
            {
              title: 'AI智能混剪',
              desc: '智能精准进行视频混剪',
            },
            {
              title: '商业模块快剪',
              desc: '精选优质模板快速剪辑成片',
            },
            {
              title: '数字人播报',
              desc: '数字人视频播报剪辑制作',
            },
          ],
          pain: [
            '文案创作难不知道写什么',
            '无专业拍摄剪辑团队和经验',
            '素材资源管理散乱难调用',
            '批量剪辑耗时耗力',
            '视频播放量低难上热门',
          ],
        },
        {
          title: '一键批量发布，提升发布效率',
          img: 'https://static.pdwl.net/jituan/images/solution/icon22.png',
          subChild: [
            {
              title: '多平台一键发布',
              desc: '多平台多账号一键发布，支持视频、图文发布',
            },
            {
              title: '智能定时发布',
              desc: '预先设定好什么时间发多少数量的什么内容，无需每天上线，发布更自由',
            },
            {
              title: '多维度智能设置',
              desc: '发布时智能生成封面，结合SEO智能生成标题、话题、重点区域和工具挂载多元化营销',
            },
            {
              title: '经营工具挂载',
              desc: '支持位置、小程序和商品营销，满足多重客户需求',
            },
          ],
          pain: [
            '多平台账号发布效率低',
            '大批量作品发布耗时耗力',
            '作品发布状态不可视，发布任务难管理',
          ],
        },
        {
          title: '数据聚合管理，提升运营效率',
          img: 'https://static.pdwl.net/jituan/images/solution/icon22.png',
          subChild: [
            {
              title: '运营数据总览',
              desc: '企业号和员工号运营数据明细查看、报表导出',
            },
            {
              title: '智能询盘报表',
              desc: '一键智能生成运营大盘，让询盘数据管理更加便捷',
            },
            {
              title: '作品数据管理',
              desc: '快捷查看作品数据概况，评论聚合批量管理，支持自动化回复',
            },
            {
              title: '视频CRM',
              desc: '内置抖音CRM系统，无需切换登录账号可实现多个账户在线私信回复',
            },
          ],
          pain: [
            '运营数据分布散乱，查看麻烦',
            '评论、留言无法统一管理',
            '回复不及时，易丢失意向客户',
          ],
        },
      ],
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper('.swiper-container', {
        autoplay: {
          delay: 3000, //时间 毫秒
          disableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.content-case-study-data-next',
          prevEl: '.content-case-study-data-prev',
        },
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: false,
        loop: true,
        grabCursor: true,
      });
    },
    openInfoDialog() {
      this.$router.push({name:"formPage"})
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.bovineVision-mobile {
  overflow: hidden;
  &-title {
    text-align: center;
    padding: 80px 0 60px 0;
    margin: 0 40px;
    h3 {
      font-size: 46px;
      font-weight: bold;
      color: #000000;
      line-height: 50px;
    }
    h5 {
      margin-top: 40px;
      font-size: 32px;
      font-weight: bold;
      color: #000000;
      line-height: 34px;
    }
    p {
      margin-top: 40px;
      height: 18px;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      line-height: 36px;
    }
    &.dark {
      h3,
      h5,
      p {
        color: #ffffff;
      }
    }
  }
  &-banner {
    position: relative;
    &-img {
      img {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        background-color: #232531;
      }
    }
    &-info {
      width: 70%;
      position: absolute;
      left: 20px;
      top: 22%;
      z-index: 1;
      color: #ffffff;
      &-desc {
        h2 {
          font-size: 50px;
          font-weight: bold;
          line-height: 54px;
        }
        p {
          margin-top: 30px;
          span {
            display: block;
            font-size: 36px;
            line-height: 60px;
          }
        }
      }
      &-btn {
        margin-top: 50px;
      }
    }
  }
  &-product {
    background-color: #f4f7fe;
    overflow: hidden;
    .bovineVision-mobile-title {
      background-image: url(https://static.pdwl.net/jituan/images/mobile/title_bg.png);
      background-size: 100% auto;
    }
    &-body {
      margin: 20px 20px 80px 20px;
      overflow: hidden;
      &-item {
        width: 50%;
        float: left;
        &-panel {
          margin: 20px;
          background: #ffffff;
          box-shadow: 0px 0px 10px 1px rgba(109, 109, 255, 0.16);
          border-radius: 16px;
          padding: 30px;
          text-align: center;
          img {
            width: auto;
            height: 80px;
            display: block;
            margin: 0 auto;
          }
          p {
            margin-top: 20px;
            font-size: 28px;
            color: #484848;
            line-height: 40px;
          }
        }
      }
    }
  }
  &-industry {
    overflow: hidden;
    background-image: url(https://static.pdwl.net/jituan/images/mobile/bovineVision/industry_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-body {
      margin: 40px 20px 90px 20px;
      overflow: hidden;
      &-item {
        width: 25%;
        float: left;
        &-panel {
          margin: 20px 10px;
          img {
            width: 100%;
            height: auto;
            display: block;
          }
          p {
            box-sizing: border-box;
            width: 100%;
            background: #000000;
            color: #fff;
            font-size: 26px;
            line-height: 40px;
            border-radius: 0 0 20px 0;
            padding: 15px;
            text-align: center;
          }
        }
        &:nth-child(5) {
          margin-left: 12%;
        }
      }
    }
  }
  &-customer {
    overflow: hidden;
    .bovineVision-mobile-title {
      background-image: url(https://static.pdwl.net/jituan/images/mobile/bovineVision/customer_title.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
    }
    &-body {
      &-box {
        background-image: url(https://static.pdwl.net/jituan/images/mobile/core_bg.png);
        background-size: 100% auto;
        background-position: left center;
        background-repeat: no-repeat;
      }
      margin: 40px;
      &-item {
        &-img {
          text-align: center;
          img {
            width: 100%;
            height: auto;
            display: block;
          }
          h5 {
            margin-top: 40px;
            font-size: 34px;
            position: relative;
            display: inline-block;
            padding: 0 10px;
            span {
              position: relative;
              z-index: 2;
            }
            &::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              z-index: 1;
              width: 100%;
              height: 10px;
              background: linear-gradient(180deg, #61dda7 0%, #1178fe 100%);
              opacity: 0.8;
            }
          }
          ul {
            margin-top: 60px;
            li {
              margin: 30px 0;
              h6 {
                font-size: 32px;
                line-height: 40px;
                color: #121212;
              }
              p {
                margin-top: 20px;
                border-radius: 6px;
                border: 1px solid;
                border-image: linear-gradient(90deg, #ff5091, #0019ff) 1 1;

                color: #484848;
                font-size: 28px;
                line-height: 38px;
                border-radius: 6px;
                padding: 30px;
                box-sizing: border-box;
              }
            }
          }
          &-pain {
            i {
              font-size: 60px;
              display: block;
              transform: -webkit-rotate(90deg);
              transform: rotate(90deg);
              background-image: -webkit-linear-gradient(top, #006fff, #60dca7);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            h6 {
              font-size: 32px;
              display: block;
              background-image: -webkit-linear-gradient(top, #006fff, #60dca7);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              margin-bottom: 30px;
            }
            p {
              font-size: 28px;
              color: #121212;
              line-height: 60px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.bovineVision-mobile {
  .vs-button {
    background: linear-gradient(90deg, #006fff 0%, #60dca7 100%);
    font-size: 24px;
    padding: 0;
    width: 200px;
    margin: 0px;
    border-radius: 8px;
  }
}
</style>
